.box{
  margin: 10px;
  height: 100px;
  width: 100px;
  /* border: 1px solid red; */
  background: linear-gradient(grey, SkyBlue);
  /* transition: transform 2s; */
  /* transform: translate(20px, 0); */
  /* transform: translateX(20px); */
  /* transform: scale(1,-1); */
  /* transform: scaleY(1); */
  /* transform: rotate(30deg); */
  /* transform: rotateX(180deg); */
  /* transform: rotateY(180deg); */

  animation: test 3s;

}
@keyframes test {
  33%{
    transform: translate(100px, 100px);
  }
  66%{
    transform: translate(100px, 100px);
    transform: scale(2,2);
  }
  100%{
      transform: translate(100px, 100px);
    transform: rotate(120deg);
  }
}
.box:hover{
  transform: rotate(45deg) scale(1, 1.5) translate(100px, 10px);
}
